export const addPaginationComponent = (editor) => {
    const { Components } = editor;

    
    Components.addType('pagination', {
        model: {
            defaults: {
                tagName: 'div',
                attributes: { class: 'pagination-container' },
                components: [
                    {
                        type: 'button',
                        content: '上一页',
                        attributes: { class: 'pagination-button prev' },
                    },
                    {
                        type: 'text',
                        content: '1',
                        attributes: { class: 'pagination-number active' },
                    },
                    {
                        type: 'text',
                        content: '2',
                        attributes: { class: 'pagination-number' },
                    },
                    {
                        type: 'text',
                        content: '3',
                        attributes: { class: 'pagination-number' },
                    },
                    {
                        type: 'text',
                        content: '4',
                        attributes: { class: 'pagination-number' },
                    },
                    {
                        type: 'text',
                        content: '5',
                        attributes: { class: 'pagination-number' },
                    },
                    {
                        type: 'button',
                        content: '下一页',
                        attributes: { class: 'pagination-button next' },
                    },
                ],
                script() {
                    const container = this;
                    let currentPage = 0;

                    const updatePagination = (isnext) => {
                        const numbers = container.querySelectorAll('.pagination-number');
                        numbers.forEach((number, index) => {
                            number.classList.remove('active');
                            if( currentPage%5===0 && isnext){
                                numbers.forEach(()=>
                                    {
                                        number.innerText = currentPage+1 + index;
                                    })
                            }
                            if( currentPage%5===4 && !isnext){
                                numbers.forEach(()=>
                                    {
                                        number.innerText = currentPage+1 - (4-index);
                                    })
                            }
                            if (index === currentPage%5) {
                                
                                number.classList.add('active');
                            }
                        });
                    };

                    container.querySelector('.prev').addEventListener('click', () => {
                        if (currentPage > 0) {
                            currentPage -= 1;
                            updatePagination(false);
                        }
                    });

                    container.querySelector('.next').addEventListener('click', () => {
                        currentPage += 1;
                        updatePagination(true);
                    });

                    container.querySelectorAll('.pagination-number').forEach(number => {
                        number.addEventListener('click', (e) => {
                            currentPage = parseInt(e.target.innerText)-1;
                            updatePagination();
                        });
                    });
                },
                styles: `
                    .pagination-container {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 10px;
                        background-color: #f9f9f9;
                        border-radius: 5px;
                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                        user-select: none;
                    }
                    .pagination-button {
                        padding: 10px 15px;
                        margin: 0 5px;
                        border: none;
                        background-color: #007bff;
                        color: #fff;
                        cursor: pointer;
                        border-radius: 5px;
                        transition: background-color 0.3s;
                    }
                    .pagination-button:hover {
                        background-color: #0056b3;
                    }
                    .pagination-number {
                        padding: 10px 15px;
                        margin: 0 5px;
                        background-color: #fff;
                        border: 1px solid #ddd;
                        border-radius: 5px;
                        cursor: pointer;
                        transition: background-color 0.3s, border-color 0.3s;
                    }
                    .pagination-number.active {
                        background-color: #007bff;
                        color: #fff;
                        border-color: #007bff;
                    }
                    .pagination-number:hover {
                        background-color: #f1f1f1;
                        border-color: #ddd;
                    }
                `,
            }
        }
    });

   
    editor.BlockManager.add('pagination', {
        label: '分页组件',
        category: 'Basic',
        content: { type: 'pagination' },
        media:`<svg t="1720767220559" class="icon" viewBox="0 0 1689 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7840" width="30" height="30"><path d="M409.6 819.2h409.6V256H409.6v563.2zM460.8 307.2h307.2v460.8H460.8V307.2z m-102.4512 511.9488V256.0512L51.2 537.6l307.1488 281.5488zM870.4 819.2h409.6V256h-409.6v563.2z m51.2-512h307.2v460.8h-307.2V307.2z m409.6-51.1488v563.0976L1638.2976 537.6 1331.2 256.0512z" p-id="7841"></path><path d="M1130.6496 464.384c0-17.0496-5.3248-30.3616-16.0768-40.0896s-25.344-14.592-43.8272-14.592c-13.1072 0-26.2656 3.328-39.5776 9.984-13.3632 6.656-25.8048 16.1792-37.3248 28.5696v-38.7584a108.032 108.032 0 0 1 35.2256-24.6784c13.056-5.7344 28.4672-8.6016 46.1312-8.6016 28.6208 0 51.6096 7.6288 69.0176 22.9376s26.112 35.9936 26.112 62.1056c0 23.296-5.3248 43.4176-16.0256 60.416-10.7008 16.9984-28.928 34.4064-54.784 52.2752-26.4192 18.176-44.032 31.2832-52.9408 39.168a76.6464 76.6464 0 0 0-18.6368 22.6304 59.7504 59.7504 0 0 0-5.3248 26.368h157.0816v35.4816h-198.7584v-15.7184c0-18.2272 2.5088-33.6896 7.4752-46.4384 4.9664-12.6976 13.1584-25.088 24.576-37.1712 11.4176-11.9808 29.2352-26.4704 53.4528-43.3664 24.7296-17.408 41.6256-32.6656 50.688-45.824 9.0624-13.056 13.5168-28.0064 13.5168-44.6976zM612.1472 697.6V427.2128c-6.2464 6.2464-16.8448 13.2608-31.744 21.0432s-28.672 13.2096-41.3184 16.3328v-39.168a262.656 262.656 0 0 0 53.6576-22.1696c19.0464-10.1376 33.6384-19.712 43.8272-28.672h15.104v323.0208h-39.5264z" p-id="7842"></path></svg>`
    });
};
